<template>
  <div class="personalInfo">
    <!-- 头部标题和返回按钮 -->
    <van-nav-bar
      left-text="个人资料"
      left-arrow
      @click-left="$router.back()"
      class="nav-bar"
    />
    <!-- /头部标题和返回按钮 -->
    <!-- 表单内容 -->
    <van-cell-group>
      <van-cell title="头像：">
        <van-image
          round
          width="55px"
          height="55px"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </van-cell>
      <van-cell title="姓名：" :value="userInformation.name" @click="isUpdateNameShow=true" />
      <van-cell title="性别："  is-link arrow-direction="down" :value="userInformation.sex" @click="isUpdateSexShow=true" />
      <van-cell title="手机号：" :value="userInformation.phone" @click="isUpdatePhoneShow=true" />
      <van-cell title="服务区域："  is-link arrow-direction="down" :value="userInformation.zone" @click="isUpdateZoneShow=true"/>
      <van-cell title="详细地址：" :value="userInformation.address" @click="isUpdateAddressShow=true"/>
      <!-- <van-cell title="手机验证码：" value="" /> -->
      <van-field
        v-model="sms"
        center
        clearable
        label="手机验证码"
        value=""
      >
        <template #button>
          <van-button class="code" size="small" type="primary">获取验证码</van-button>
        </template>
      </van-field>
    </van-cell-group>
    <!--/ 表单内容 -->
    <!-- 保存按钮 -->
    <div class="btnSave">保存</div>
    <!-- /保存按钮 -->
    <!-- 弹层组件 -->
    <!-- 姓名 -->
    <van-popup class="updateName" v-model="isUpdateNameShow" position="bottom">
      <update-name
        v-model="userInformation.name"
        v-if="isUpdateNameShow"
        @close="isUpdateNameShow=false"
        @onComfirmName="onUpdateName"
       />
    </van-popup>
    <!-- 性别 -->
    <van-popup class="updateSex" v-model="isUpdateSexShow" position="bottom">
      <update-sex
        v-model="userInformation.sex"
        v-if="isUpdateSexShow"
        @close="isUpdateSexShow=false"
        @changeSex="onUpdateSex"
       />
    </van-popup>
    <!-- 电话 -->
    <van-popup class="updatePhone" v-model="isUpdatePhoneShow" position="bottom">
      <update-phone
        v-model="userInformation.phone"
        v-if="isUpdatePhoneShow"
        @close="isUpdatePhoneShow=false"
        @onComfirmPhone="onUpdatePhone"
       />
    </van-popup>
    <!-- 服务区域 -->
    <van-popup class="updateZone" v-model="isUpdateZoneShow" position="bottom">
      <update-zone
        v-model="userInformation.zone"
        v-if="isUpdateZoneShow"
        @close="isUpdateZoneShow=false"
        @onComfirmZone="onUpdateZone"
       />
    </van-popup>
    <!-- 详细地址 -->
    <van-popup class="updateZone" v-model="isUpdateAddressShow" position="bottom">
      <update-address
        v-model="userInformation.address"
        v-if="isUpdateAddressShow"
        @close="isUpdateAddressShow=false"
        @onComfirmAddress="onUpdateAddress"
       />
    </van-popup>
    <!--/ 弹层组件 -->
  </div>
</template>

<script>
import updateName from './components/update-name.vue'
import updateSex from './components/update-sex.vue'
import updatePhone from './components/update-phone.vue'
import updateZone from './components/update-zone.vue'
import updateAddress from './components/update-address.vue'

export default {
  data () {
    return {
      username: '',
      password: '',
      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      sms: '',
      // 弹出层
      isUpdateNameShow: false,
      isUpdateSexShow: false,
      isUpdatePhoneShow: false,
      isUpdateZoneShow: false,
      isUpdateAddressShow: false,
      userInformation: this.$store.state.userInfo
    }
  },
  components: {
    updateName,
    updateSex,
    updatePhone,
    updateZone,
    updateAddress
  },
  created () {

  },
  mounted () {

  },
  methods: {
    onUpdateName (localName) { // 该姓名
      this.userInformation.name = localName
      this.isUpdateNameShow = false
      // console.log(this.userInformation)
    },
    onUpdateSex (value) { // 改性别
      this.userInformation.sex = value
      this.isUpdateSexShow = false
    },
    onUpdatePhone (phoneNum) {
      this.userInformation.phone = phoneNum
      this.isUpdatePhoneShow = false
    },
    onUpdateZone (sum) {
      this.userInformation.zone = sum
      this.isUpdateZoneShow = false
    },
    onUpdateAddress (addressName) {
      this.userInformation.address = addressName
      this.isUpdateAddressShow = false
    }
  }
}
</script>

<style scoped lang="less">
.nav-bar {
  // 湖南征信认证 z-index=1
  z-index: 100;
  height: 128px;
  background-color: rgba(63, 81, 181, 100);
  /deep/.van-nav-bar__text {
    color: #FFFFFF;
    font-size: 32px;
  }
  /deep/.van-icon::before {
    color: #fff!important;
  }
  /deep/.van-nav-bar__content {
    height: 100%;
  }
}
// 下面就是测试内容
.van-cell-group {
  padding: 0 14px;
}
.van-cell {
  align-items: center!important;
  border-bottom:1px solid #F0EEEE ; // #F0EEEE
  font-size: 26px;
  color: #101010;
}
.code {
  width: 200px;
  height: 50px;
  background-color: #3F51B5;
  color: #fff;
  border: none;
}
.personalInfo {
  position: relative;
}
.btnSave {
  height: 98px;
  background-color:#3F51B5;
  text-align: center;
  line-height: 98px;
  font-size: 28px;
  color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
}
/deep/.van-field__label {
  color: black;
}
// 弹层组件
.updateName {
  height: 100%;
  background-color: #f5f7f9;
}
.updatePhone {
  height: 100%;
  background-color: #f5f7f9;
}
</style>
